<template>
    <div class="container">
        <van-sticky>
            <div class="head">
                <img class="head-back-img" @click="goBack" src="../assets/back.svg" alt="">
                <div class="title">卡券记录</div>
            </div>
        </van-sticky>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="列表已全部加载完毕" @load="onLoads">
                <div class="list" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
                    <div class="header">
                        <div>
                            <div>
                                <span>订单编号：{{ item.orderNo }}</span>
                            </div>
                            <div>{{ item.cardMode == 1 ? '观影次数卡' : '积分卡' }} </div>
                        </div>
                    </div>
                    <div class="con">
                        <div class="left">
                            <div>
                                <div>
                                    <span>{{ item.tradeType == 1 ? '电影' : '福利' }}</span>
                                </div>
                                <div>
                                    <div v-if="item.cardMode == 1">抵扣的总次数：{{ item.totalDeductCount }}</div>
                                    <div v-if="item.cardMode == 2">抵扣的总金额：{{ item.totalDeductAmount }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="money">
                        <div>
                            <span> 卡余额/剩余次数</span>
                            <span> </span>
                            <span>{{ item.cardBalanceAfter || 0 }}</span>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import plantAPI from "@/api/plant";
export default {
    data() {
        return {
            show: false,
            list: [

            ],
            loading: false,
            finished: false,
            pageNum: 1,
            pageSize: 10,
            codeList: [],
            detailObj: {},
            isLoading: false
        }
    },
    created() {

    },
    methods: {
        onRefresh() {
            setTimeout(() => {
                this.pageNum = 1;
                this.list = []
                this.initData()
                this.isLoading = false;
            }, 1000);
        },
        goBack() {
            this.$router.go(-1)
        },
        goDetail(item) {
            if (item.tradeType == 1) {
                this.$router.push(
                    {
                        path: '/orderDetail',
                        query: {
                            orderNo: item.orderNo
                        }
                    }
                )
            } else {
                this.$router.push(
                    {
                        path: '/cardUsageRecordDetail',
                        query: {
                            orderNo: item.orderNo,
                            tradeType: item.tradeType
                        }
                    }
                )
            }


        },
        onLoads() {
            this.initData()
        },
        initData() {
            this.loading = true;
            let cardId = this.$route.query.cardId;
            plantAPI.cardUsageRecordList({
                cardId,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(async res => {
                const result = res.rows;
                result.forEach(item => {
                    this.list.push(item);
                });
                this.loading = false;
                if (this.list.length !== res.total) {
                    this.finished = false;
                    this.pageNum++;
                } else {
                    this.finished = true;
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-sticky {
    background: #FFFFFF;

}

::v-deep .van-pull-refresh {
    // height: calc(100vh - 50px);
}

.container {
    min-height: 100vh;
    background: rgb(244, 244, 244);

    .head {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        position: relative; // 关键：设置相对定位
        background-color: #ffffff;

        .head-back-img {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 15px;
        }

        .title {
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: #000000;
        }
    }

    .list {
        width: 100%;
        background: #ffffff;
        margin-top: 8px;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;

        .header {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;

            >div {
                width: 100%;
                height: 40px;
                line-height: 40px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #5B626A;
                font-size: 12px;
                border-bottom: 1px solid #eeeeee;

                >div:nth-child(1) {
                    display: flex;
                    align-items: center;

                    img {
                        width: 15px;
                        height: 15px;
                    }
                }

                >div:nth-child(2) {
                    color: rgb(255, 89, 122);
                }
            }

        }

        .con {
            width: 100%;
            padding: 10px 20px 5px 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;

            .left {
                width: 100%;
                display: flex;
                justify-content: space-between;

                >img {
                    width: 80px;
                    height: 80px;
                    border-radius: 8px;
                }

                >div {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    align-content: space-between;

                    >div:nth-child(1) {
                        width: 100%;
                        color: #1e1d1e;
                        font-size: 14px;
                        font-weight: bold;
                    }

                    >div:nth-child(2) {
                        width: 100%;

                        >div {
                            width: 100%;
                            color: #525152;
                            font-size: 12px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            margin-top: 10px;
                        }

                        >div:nth-child(2),
                        >div:nth-child(3) {
                            color: #8f8e8f;
                        }
                    }
                }

            }

            .right {
                width: 64px;
                display: flex;
                justify-content: flex-end;

                >div {
                    text-align: right;
                    display: flex;
                    align-content: space-between;
                    margin-top: 10px;

                    span {
                        font-size: 12px;
                        font-weight: bold;

                    }

                    >span:nth-child(1) {
                        margin-top: 1px;
                        font-size: 11px;
                        margin-right: 1px;
                    }
                }
            }
        }

        .money {
            width: 100%;
            padding: 10px 20px 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            margin-top: 4px;

            >div {
                color: #000000;
                font-size: 12px;

                >span:nth-child(2) {
                    margin: 0 1px 0 3px;
                }

                >span:nth-child(3) {
                    font-size: 16px;
                    font-weight: bold;
                }
            }

            >div:nth-child(2) {
                color: #5e5c5c;
                font-size: 12px;
                margin-right: 10px;
            }
        }

        .fot {
            width: 100%;
            padding: 10px 15px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #8f8e8f;
            font-size: 12px;

            >div:nth-child(2) {
                display: flex;

                >div {
                    border: 1px solid #8f8e8f;
                    width: 64px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    border-radius: 17px;
                }

                .goPay {
                    border: 1px solid rgb(255, 89, 122);
                    color: rgb(255, 89, 122);
                    margin-right: 10px;
                }

                .goPays {
                    border: 1px solid #999;
                    color: #999;
                    margin-right: 10px;
                }

                .rightBtn {
                    width: 64px;
                    height: 26px;
                    line-height: 26px;
                    border-radius: 17px;
                    background-color: rgba(246, 57, 13, 1);
                    color: #FFFFFF;
                    font-size: 12px;
                    text-align: center;
                    border: 1px solid rgba(246, 57, 13, 1);
                }
            }

        }
    }
}


.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 300px;
    //height: 300px;
    background-color: #fff;
    border-radius: 15px;
    padding: 7px 13px;
    box-sizing: border-box;

    >div:nth-child(1) {
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        display: flex;
        justify-content: space-between;

        img {
            width: 22px;
            height: 29px;
        }

    }

    >div:nth-child(2) {
        color: rgba(154, 154, 154, 1);
        font-size: 14px;
        margin-top: 5px;
        width: 100%;
        text-align: left;
    }

    >div:nth-child(3) {
        width: 143px;
        height: 180px;
        margin: 25px auto 25px;

        .van-swipe {
            width: 150px;
            height: 170px;
            margin: auto;
        }

        .van-swipe-item {
            display: flex;
            flex-wrap: wrap;

            img {
                width: 150px;
                height: 150px;
            }

            >div {
                width: 100%;
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                font-weight: bold;
                text-align: center;
            }
        }
    }
}

.qr-item {
    text-align: center;

    img {
        width: 150px;
        height: 150px;
        display: block;
        margin: 0 auto;
    }

    .seat-info {
        margin-top: 5px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .verification-code {
        margin-top: 5px;
        padding-bottom: 10px;
        font-size: 12px;
        color: #666;
    }
}
</style>
